<!-- 通用蒙层 -->
<template>
	<transition :name="tran">
		<div class="com-mask" :class="{'mask-all': black}" @touchmove.prevent>
			<slot></slot>
		</div>
	</transition>
</template>
<script type="text/javascript">
	export default {
		name: 'com-mask',
		props: {
			tran: {
				type: String,
				default: () => 'fade'
			},
			black: {
				type: Boolean,
				default: () => false
			}
		}
	}
</script>
<style lang="less">
	.com-mask {
		position: fixed;
		background-color: rgba(0,0,0,.85);
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 998;
		&.mask-all {
			background-color: #000;
		}
	}
</style>